<template>
  <div class="newsContainer">
    <el-card class="card-header">
      <div slot="header" class="clearfix">
        <div class="news_tit">
          <span>新闻筛选</span>
          <div class="total">
            <span>总数：</span>
            <span>{{ totalData.all_num }}</span>
            <span>今日打标：</span>
            <span>{{ totalData.today_num }}</span>
          </div>
        </div>

      </div>
      <div class="search">
        <el-row :gutter="20" type="flex" justify="end">

          <el-col :span="8">
            <span class="label">日期筛选</span>
            <el-date-picker
              v-model="datetimerange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              clearable
              unlink-panels
              @change="newsSearch"
            />
          </el-col>
          <el-col :span="4">
            <el-select v-model="newsParams.platform_name" placeholder="来源筛选" @clear="getNews" @change="getNews">
              <el-option
                v-for="item in platformOPtions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="newsParams.model_name" placeholder="模型筛选" @clear="getNews" @change="handleNews">
              <el-option
                v-for="item in modelOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input v-model="newsParams.keywords" placeholder="关键词筛选" clearable @clear="getNews" @keyup.enter.native="getNews" />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click.native.prevent="getNews">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="card_body">
      <div class="content">
        <ul class="news">
          <li v-for="item in newsData.data" :key="item.id" class="item">
            <div v-if="item.model==='1'" class="forecast">是否热点新闻：<span class="yes" v-if="item.is_hot_news==1">是</span><span class="no" v-if="item.is_hot_news==0">否</span><span v-if="item.is_hot_news==-1">未处理</span></div>
            <div v-if="item.model=='2'" class="forecast">情感正负向：<span   class="yes"v-if="item.emotion==0">正向</span><span class="no"v-if="item.emotion==1">负向</span><span v-if="item.emotion==-1">未处理</span></div>
            <div v-if="item.model=='3'" class="forecast">是否是广告：<span  class="yes" v-if="item.advertising==1">是</span><span class="no" v-if="item.advertising==0">否</span><span v-if="item.advertising==-1">未处理</span></div>
            <div class="news_txt">
              <a v-if="item.url" :href="item.url" target="_blank">
                <p>{{ item.content }}</p>
              </a>
              <a v-else href="#">
                <p>{{ item.content }}</p>
              </a>
            </div>
            <div class="alter">
              <el-radio-group v-model="item.tag" @change="handleRadio(item)">
                <el-radio-button v-if="newsParams.model_name==1||newsParams.model_name==3" class="first" label="1">是</el-radio-button>
                <el-radio-button v-if="newsParams.model_name==2" class="first" label="1">积极</el-radio-button>
                <el-radio-button v-if="newsParams.model_name==4" class="first" label="1">正向</el-radio-button>
                <el-radio-button v-if="newsParams.model_name==2||newsParams.model_name==4" class="third" label="2">中性</el-radio-button>
                <el-radio-button v-if="newsParams.model_name==1||newsParams.model_name==3" class="second" label="0">否</el-radio-button>
                <el-radio-button v-if="newsParams.model_name==2" class="second" label="0">消极</el-radio-button>
                <el-radio-button v-if="newsParams.model_name==4" class="second" label="0">负向</el-radio-button>
              </el-radio-group>
            </div>
          </li>
        </ul>
      </div>

    </el-card>
  </div>
</template>

<script>
import { getNews, addAlter, filterModel, getTotal } from '@/api/news'
export default {
  data() {
    return {
      datetimerange: '',
      newsData: [],
      platformOPtions: [],
      newsParams: {
        platform_name: '',
        model_name: '1',
        pre_time: '',
        post_time: '',
        keywords: '',
        page: 1,
        row: 1,
        u_name: window.localStorage.getItem('u_name')
      },
      modelOptions: [
        {
          value: '1',
          name: '重要新闻'
        },
        {
          value: '2',
          name: '情感分析'
        },
        {
          value: '3',
          name: '广告识别'
        },
        {
          value: '4',
          name: '新闻正负面'
        }
      ],
      loading: false,
      totalData: ''

    }
  },
  created() {
    this.getPlatform()
    this.getTotal()
  },
  methods: {
    // 获取平台
    async getPlatform() {
      const res = await filterModel(this.newsParams.model_name)
      this.platformOPtions = res.data
      // this.newsParams.platform_name = this.platformOPtions[0]
      // console.log(this.platformOPtions,123123123)
      this.getNews()
    },
    // 获取新闻列表
    async getNews() {
      const res = await getNews(this.newsParams)
      if (res.code !== 2000) {
        this.$message.error(res.msg)
      }
      this.newsData = res.data
      console.log(this.newsData,5555555)

    },

    handleNews(val) {
      this.newsParams.model_name = val
      this.getPlatform()
    },
    // 打标请求
    async handleRadio(row) {
      var newsObj = {}
      newsObj['platform_name'] = row.platform_name
      newsObj['tag'] = parseInt(row.tag)
      newsObj['username'] = window.localStorage.getItem('u_name')
      newsObj['model_name'] = this.newsParams.model_name
      const res = await addAlter(row.id, newsObj)
      if (res.code !== 2000) {
        this.$message.error(res.msg)
      }
      this.newsParams.page++
      this.getNews()
      this.getTotal()
    },
    newsSearch() {
      if (!this.datetimerange) {
        this.newsParams.pre_time = ''
        this.newsParams.post_time = ''
        this.getNews()
      } else {
        this.newsParams.pre_time = this.datetimerange[0]
        this.newsParams.post_time = this.datetimerange[1]
        this.getNews()
      }
    },

    // 获取打标信息
    async  getTotal() {
      const name = window.localStorage.getItem('u_name')
      const res = await getTotal(name)
      this.totalData = res.data
    }

  }
}
</script>

<style lang="scss" >

.search .el-col{
  display: flex;
  .label{
    display: inline-block;
    width: 130px;
    align-self: center;
  }
}

.el-input{
  margin-right: 15px;
}

.card_body{
  margin-top: 20px;
}
.title{
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.el-card{
  border: none;
}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
  box-shadow: none;
}

.first .el-radio-button__inner{
  background-color: #1E69F3;
  color: #fff;
  padding: 20px 50px;

}
.second .el-radio-button__inner{
  background-color: #F95353;
  color: #fff;
  padding: 20px 50px;

}
.third .el-radio-button__inner{
  background-color: #858585;
  color: #fff;
  padding: 20px 40px;
  //  margin: 0 20px;

}

.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  color: #FFF;
  background-color: none !important;
  border-color: none !important;
  -webkit-box-shadow: -1px 0 0 0 none;
  box-shadow: -1px 0 0 0 none;
}

.first{
  margin-right: 80px;
}
.third{
  margin-right: 80px;
}
.el-radio-button:first-child .el-radio-button__inner{
  border-radius: 0;
}

.el-radio-button:last-child .el-radio-button__inner{
  border-radius: 0;
}
.news {
  padding: 0;
  margin-top: 0;
  .item{
    line-height: 30px;
    border-bottom: none;
    .forecast{
      display: flex;
      justify-content: flex-end;
      .yes{
        color: #1E69F3;
        font-weight: 600;
      }
      .no{
        color: #F51128;
        font-weight: 600;
      }
    }
    .news_txt{
      margin-top: 50px;
    }
  }
}

.alter{
  position: fixed;
  text-align: center;
  top: 25%;
  left: 45%;
}

.newsContainer .news_tit{
  display: flex;
  justify-content: space-between;
  .total{
    span{
      &:nth-child(2){
        margin:0 20px;
        color: #F93434;
        font-weight: 600;
      }
      &:last-child{
        color: #F93434;
        font-weight: 600;
      }
    }
  }
}

</style>
